<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 实现飞翔的小鸟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .birds {
            width: 141px;
            height: 85px;
            position: absolute;
            margin-top: 150px;
            background-image: url("images/bird.png");
            animation: bird 1s steps(1) infinite;

        }

        @keyframes bird {
            0% {
                background-position: calc(-141px * 0) 0;
            }
            12.5% {
                background-position: calc(-141px * 1);
            }
            25% {
                background-position: calc(-141px * 2);
            }
            37.5% {
                background-position: calc(-141px * 3);
            }
            50% {
                background-position: calc(-141px * 4);
            }
            62.5% {
                background-position: calc(-141px * 5);
            }
            75% {
                background-position: calc(-141px * 6);
            }
            87.5% {
                background-position: calc(-141px * 7);
            }
            100% {
                background-position: calc(-141px * 8);
            }
        }

        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background: url("images/back2.jpg");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div class="birds"></div>
<script>
    /* 飞翔的距离，单次飞翔的时间，body 飞翔空间的大小，小鸟本身，小鸟的长度（宽度）,小鸟飞翔的方向*/
    var distance = 10, time = 100, bodyWidth = document.getElementsByTagName("body")[0].offsetWidth,
            birdDoc = document.getElementsByClassName("birds")[0], birdWidth = birdDoc.offsetWidth, pointer = true;
    var birdTimeId = setInterval(function (e) {

        birdDoc.style['left']=distance+"px";
        if(pointer){
            distance+=10;
            pointer=(distance+birdWidth+10)>bodyWidth?false:true;
            birdDoc.style['transform']='scale(1,1)';
        }else{
            distance-=10;
            pointer=distance< 0 ?true:false;
            birdDoc.style['transform']='scale(-1,1)';
        }

    }, time )
</script>
</body>
</html>














